<template>
	<div class="white-box">

		<div class="task-one">
			<div class="task-one__item">
				<span class="task-one__label">骑手id：</span>
				<el-input placeholder="请输入骑手id搜索" v-model="uid" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">账号：</span>
				<el-input placeholder="请输入账号搜索" v-model="account" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">骑手名称：</span>
				<el-input placeholder="请输入骑手名称搜索" v-model="rider_name" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">骑手电话：</span>
				<el-input placeholder="请输入骑手电话搜索" v-model="phone" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
				<span class="task-one__label">区域名称：</span>
				<el-input placeholder="请输入区域名称搜索" v-model="pca_label" @keyup.enter.native="handleSearch" clearable>
				</el-input>
			</div>
			<div class="task-one__item">
			    <span class="task-one__label">骑手状态：</span>
			    <el-select v-model="rider_status" clearable placeholder="请选择骑手状态">
			    	<el-option :label="item.name" :value="item.id" v-for="(item, index) in riderList"
			    		:key="index" />
			    </el-select>
			</div>
			<div class="task-one__item">
			    <span class="task-one__label">是否全职：</span>
			    <el-select v-model="rider_job" clearable placeholder="请选择全职">
			    	<el-option :label="item.name" :value="item.id" v-for="(item, index) in jobList"
			    		:key="index" />
			    </el-select>
			</div>
			<div class="task-one__btn clearfix">
				<el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
			</div>
		</div>

		<el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
			element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
			<!-- <el-table-column type="selection" width="55" /> -->
			<el-table-column prop="store_img" label="基本信息" width="250" fixed="left">
				<template #default="{ row }">
					<div>
						<div>ID:{{row.id}}</div>
						<div>{{row.rider_name}}({{row.rider_job_label}})</div>
						<div>电话:{{row.phone}}</div>
						<div>账号:{{row.account}}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="store_img" label="地址" width="250">
				<template #default="{ row }">
					<div>
						{{row.pca_label}}{{row.rider_address}}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="rider_wallet" label="收益" width="170"></el-table-column>
			<el-table-column prop="rider_status" label="在线" width="170">
				<template #default="{ row }">
					<div>
						<el-radio-group v-model="row.rider_status" size="small" @change="changeRider(row,$event)">
							<el-radio-button :label="1">是</el-radio-button>
							<el-radio-button :label="2">否</el-radio-button>
						</el-radio-group>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="account_state" label="启用" width="170">
				<template #default="{ row }">
					<div>
						<el-radio-group v-model="row.account_state" size="small" @change="changeAccount(row,$event)">
							<el-radio-button :label="1">是</el-radio-button>
							<el-radio-button :label="2">否</el-radio-button>
						</el-radio-group>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="created_at" label="入驻时间" width="170"></el-table-column>
			<el-table-column prop="updated_at" label="更新时间" width="170"></el-table-column>


			<el-table-column label="操作" width="170" fixed="right">
				<template #default="{ row }">
					<el-button class="theme-btn" link type="primary" style="margin-right: 14px;margin-left: 0 !important;" @click="handleEdit(row)">编辑</el-button>
					<el-button class="theme-btn" link type="primary" style="margin-right: 14px;margin-left: 0 !important;" @click="handleEditPassword(row)">修改密码</el-button>
					<el-button class="theme-btn" link type="primary" style="margin-right: 14px;margin-left: 0 !important;" @click="handleEditIncome(row)">调整收益</el-button>
					<el-popconfirm :persistent="false" title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消"
						@confirm="handleDelete(row)">
						<template #reference>
							<el-button class="theme-btn" link type="primary" style="margin-right: 14px;margin-left: 0 !important;">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
			:total="totalNums" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		<el-dialog v-model="showRider" title="骑手" width="1300px" :append-to-body="true" :destroy-on-close="true"
			:close-on-click-modal="false" @close="closeAddRider">
			<el-form ref="ruleRiderRef" :model="ruleRiderForm" :rules="ruleCheckRider" label-width="120px">
				<el-row>
					<el-col :span="12">

						<el-form-item label="姓名" prop="rider_name" required>
							<el-input v-model.trim="ruleRiderForm.rider_name" clearable placeholder="请输入姓名" />
						</el-form-item>
						<el-form-item label="手机号" prop="phone" required>
							<el-input v-model.trim="ruleRiderForm.phone" clearable placeholder="请输入手机号" />
						</el-form-item>
						<el-form-item label="所属区域" prop="region" required>
							<elui-china-area-dht v-model="ruleRiderForm.region"
								@change="handleChangeRegion"></elui-china-area-dht>
						</el-form-item>
						<el-form-item label="联系地址" prop="rider_address" required>
							<el-input v-model.trim="ruleRiderForm.rider_address" clearable placeholder="请输入联系地址" />
						</el-form-item>
						<el-form-item label="身份证正面" prop="card_front" required>
							<div class="avatar-uploaderqishou" @click="onKey('card_front')">
								<el-upload ref="uploadFileRef" :show-file-list="false" :action="actionImgUrl()"
									:on-change="fileChange" :multiple="upload_batch" :auto-upload="false" :limit="1"
									style="margin-right: 12px">
									<img v-if="ruleRiderForm.card_front" :src="proxy.imgUrl + ruleRiderForm.card_front"
										class="cardImg" />
									<el-icon v-else color="#999" class="avatar-uploader-icon">
										<upload-filled />
									</el-icon>
								</el-upload>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否全职" prop="rider_job" required>
							<el-radio-group v-model="ruleRiderForm.rider_job">
								<el-radio :label="1">全职</el-radio>
								<el-radio :label="2">兼职</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="经度" prop="lng" required>
							<el-input v-model.trim="ruleRiderForm.lng" clearable placeholder="请输入经度" />
							<el-button style="margin-left:20px" type="primary" @click="handleLon">获取经纬度</el-button>
						</el-form-item>
						<el-form-item label="纬度" prop="lat" required>
							<el-input v-model.trim="ruleRiderForm.lat" clearable placeholder="请输入纬度" />
						</el-form-item>
						<el-form-item label="身份证反面" prop="card_back" required>

							<div class="avatar-uploaderqishou" @click="onKey('card_back')">
								<el-upload ref="uploadFileRef" :show-file-list="false" :action="actionImgUrl()"
									:on-change="fileChange" :multiple="upload_batch" :auto-upload="false" :limit="1"
									style="margin-right: 12px">
									<img v-if="ruleRiderForm.card_back" :src="proxy.imgUrl + ruleRiderForm.card_back"
										class="cardImg" />
									<el-icon v-else color="#999" class="avatar-uploader-icon">
										<upload-filled />
									</el-icon>
								</el-upload>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="rider_loading" @click="submitRiderForm(ruleRiderRef)">
							确认
						</el-button>
						<!-- <el-button @click="resetRiderForm(ruleRiderRef)">重置</el-button> -->
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog v-model="showRiderAccount" title="修改密码" width="560px" :append-to-body="true" :destroy-on-close="true"
			:close-on-click-modal="false" @close="closeAddRiderAccount">
			<el-form ref="ruleRiderAccountRef" :model="ruleRiderAccountForm" :rules="ruleCheckRiderAccount" label-width="120px">
				<el-form-item label="账号" prop="account" required>
					<el-input v-model.trim="ruleRiderAccountForm.account" clearable placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="密码" prop="password" required>
					<el-input v-model.trim="ruleRiderAccountForm.password" name="current-password" autocomplete="new-password" type="password" clearable
						placeholder="请输入密码" show-password />
				</el-form-item>
		
				<el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="rider_loading" @click="submitRiderAccountForm(ruleRiderAccountRef)">
							确认
						</el-button>
						<!-- <el-button @click="resetRiderForm(ruleRiderRef)">重置</el-button> -->
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog v-model="showEditBalance" title="调整收益"
			width="560px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false"
			@close="closeAddClass">
			<el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">
				<el-form-item label="骑手ID" prop="rider_id">
					<div>{{ruleClassForm.rider_id}}</div>
				</el-form-item>
		
				<el-form-item label="变动" prop="wallet_balance" required>
					<el-input v-model.trim="ruleClassForm.wallet_balance" type="number" clearable placeholder="请输入余额变动" />
					<div style="font-size: 14px;">正数增加，负数减少</div>
				</el-form-item>
		
				<el-form-item label="备注" prop="remark" required>
					<el-input v-model.trim="ruleClassForm.remark" :rows="2" type="textarea" clearable
						placeholder="请输入备注" />
				</el-form-item>
				<el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="form_loading" @click="submitClassForm(ruleClassRef)">
							确认
						</el-button>
						<el-button @click="resetClassForm(ruleClassRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>

		<go-back />

	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		watch
	} from "vue"
	import OneLoad from "@mixins/one-load"
	import {
		useRouter
	} from "vue-router"
	import {
		Search,
		UploadFilled,
		CloseBold,
		Plus
	} from "@element-plus/icons-vue"
	import GoBack from "@components/GoBack.vue"

	import {
		EluiChinaAreaDht
	} from 'elui-china-area-dht'
	import chinaAreaData from 'china-area-data';

	import UploadImg from "@mixins/upload-img"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	onMounted(() => {
		getList()
	})
	/**
	 * minxin列表加载
	 */
	const {
		page,
		pageSizeNum,
		pageSize,
		loading,
		arr_data,
		totalNums,
		search_text,
		search_btn,
		pubParams,
		pubRefreshParams,
		getdata
	} = OneLoad()
	const type_id = ref("")

	// 切换每页显示条数
	watch(pageSize, (val) => {
		page.value = 1
		pubParams(getList)
	})
	// 跳转第几页
	watch(page, (val) => {
		pubParams(getList)
	})
	const handleSearch = () => {
		search_btn.value = true
		pubRefreshParams(getList)
	}
	
	const uid=ref('')
	const account=ref('')
	const rider_name=ref('')
	const phone=ref('')
	const pca_label=ref('')
	
	const rider_status=ref('')//1在线，2不在线
	const riderList=ref([
		{
			name:"在线",
			id:1
		},{
			name:"不在线",
			id:2
		}
	])
	
	const rider_job=ref('')//1全职，2兼职
	const jobList=ref([
		{
			name:"全职",
			id:1
		},
		{
			name:"兼职",
			id:2
		}
	])

	function getList() {
		let params = {
			page: page.value,
			limit: pageSize.value,
			id:uid.value,
			account:account.value,
			rider_name:rider_name.value,
			phone:phone.value,
			pca_label:pca_label.value,
			rider_status:rider_status.value,
			rider_job:rider_job.value,
		}
		getdata("admin/rider/getRiderList", params)
	}

	/*
	 *设置骑手
	 */
	const showRider = ref(false)
	const rider_loading = ref(false)
	const riderType = ref(1)
	const ruleRiderRef = ref(null)
	const ruleRiderForm = reactive({
		rider_job: 1, //1全职，2兼职
		member_id: 0,
		account: "",
		rider_name: "",
		phone: "",
		card_front: "",
		region: [],
		rider_address: "",
		lng: "",
		lat: "",
		card_back: "",
		id: ""

	})
	const ruleCheckRider = reactive({
		account: [{
			required: true,
			message: "请输入账号",
			trigger: "blur"
		}],
		rider_name: [{
			required: true,
			message: "请输入姓名",
			trigger: "blur"
		}],
		rider_job: [{
			required: true,
			message: "请选择是否全职",
			trigger: "change"
		}],
		region: [{
			required: true,
			message: "请选择区域",
			trigger: "change"
		}],
		rider_address: [{
			required: true,
			message: "请输入联系地址",
			trigger: "blur"
		}],
		lat: [{
			required: true,
			message: "请输入纬度",
			trigger: "blur"
		}],
		lng: [{
			required: true,
			message: "请输入经度",
			trigger: "blur"
		}],
		phone: [{
			validator: proxy.$util.validPhone,
			trigger: "blur"
		}],
		card_front: [{
			required: true,
			message: "请上传身份证正面",
			trigger: "change"
		}],
		card_back: [{
			required: true,
			message: "请上传身份证反面",
			trigger: "change"
		}],
	})

	//省市区
	const regionName = ref("")
	const handleChangeRegion = (e) => {
		regionName.value = chinaAreaData['86'][e[0]] + chinaAreaData[e[0]][e[1]] + chinaAreaData[e[1]][e[2]]
	}

	function handleLon() {
		window.open("https://lbs.qq.com/getPoint/");
	}

	const handleEdit = (row, key) => {
		ruleRiderForm.id = row.id
		proxy.$axios
			.get("admin/rider/getRiderInfo?id=" + row.id)
			.then((res) => {
				if (res.data.code == 0) {
					var result = res.data.data
					var region = []
					region.push(result.rider_province)
					region.push(result.rider_city)
					region.push(result.rider_area)

					ruleRiderForm.rider_name = result.rider_name
					ruleRiderForm.phone = result.phone
					ruleRiderForm.rider_job = result.rider_job
					ruleRiderForm.card_front = result.card_front
					ruleRiderForm.card_back = result.card_back


					ruleRiderForm.region = region

					regionName.value = result.pca_label

					ruleRiderForm.rider_address = result.rider_address

					ruleRiderForm.lat = result.lat
					ruleRiderForm.lng = result.lng
					showRider.value = true
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})

	}
	const resetRiderForm = (formEl) => {
		if (!formEl) return
		formEl.resetFields()
	}
	const closeAddRider = () => {
		showRider.value = false
		resetRiderForm(ruleRiderRef.value)
	}
	const submitRiderForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				rider_loading.value = true
				// let names = proxy.$util.replaceStr(ruleRiderForm.name)
				let data = {
					id: ruleRiderForm.id,
					rider_name: ruleRiderForm.rider_name,
					phone: ruleRiderForm.phone,
					rider_job: ruleRiderForm.rider_job,
					card_front: ruleRiderForm.card_front,
					card_back: ruleRiderForm.card_back,
					lat: ruleRiderForm.lat,
					lng: ruleRiderForm.lng,

					rider_province: ruleRiderForm.region[0],
					rider_city: ruleRiderForm.region[1],
					rider_area: ruleRiderForm.region[2],
					rider_address: ruleRiderForm.rider_address,

					pca_label: regionName.value


				}

				proxy.$axios
					.post("admin/rider/edit", data)
					.then((res) => {
						rider_loading.value = false
						if (res.data.code == 0) {
							showRider.value = false
							proxy.$message({
								message: "编辑成功",
								type: "success"
							})
							pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						rider_loading.value = false
					})
			}
		})
	}
	
	//修改密码
	const showRiderAccount = ref(false)
	const riderAccount_loading = ref(false)
	const ruleRiderAccountRef = ref(null)
	const ruleRiderAccountForm = reactive({
		account: "",
		password: "",
		id: ""
	
	})
	const ruleCheckRiderAccount = reactive({
		account: [{
			required: true,
			message: "请输入账号",
			trigger: "blur"
		}],
		password: [{
			required: true,
			message: "请输入密码",
			trigger: "blur"
		}]
	})
	const handleEditPassword=(row)=>{
		ruleRiderAccountForm.id=row.id
		showRiderAccount.value=true
	}
	
	const closeAddRiderAccount = () => {
		showRider.value = false
		resetRiderForm(ruleRiderRef.value)
	}
	const submitRiderAccountForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				riderAccount_loading.value = true
				// let names = proxy.$util.replaceStr(ruleRiderForm.name)
				let data = {
					id: ruleRiderAccountForm.id,
					account: ruleRiderAccountForm.account,
					password: ruleRiderAccountForm.password,
				}
	
				proxy.$axios
					.post("admin/rider/editacp", data)
					.then((res) => {
						rider_loading.value = false
						if (res.data.code == 0) {
							showRiderAccount.value = false
							proxy.$message({
								message: "编辑成功",
								type: "success"
							})
							pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						rideAccountr_loading.value = false
					})
			}
		})
	}

	/**
	 * 上传图片
	 * @property {Function} uploadImg 上传
	 */
	const {
		actionImgUrl
	} = UploadImg()
	const imgkey = ref('card_back')
	const onKey = (key) => {
		imgkey.value = key
	}
	const uploadFileRef = ref(null)

	function fileChange(file, fileArr) {
		loading.value = true
		let data = new FormData()
		data.append("file", file.raw)
		proxy.$axios
			.post("admin/upload/upload", data)
			.then((res) => {
				if (res.data.code == 0) {
					var key = imgkey.value
					loading.value = false
					uploadFileRef.value.clearFiles()
					ruleRiderForm[`${key}`] = res.data.data.pic
					console.log("ruleRiderForm", ruleRiderForm)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})

	}
	//删除
	function handleDelete(params) {
		proxy.$axios
			.post("admin/rider/delRider", {
				id: params.id,
				member_id:params.member_id
			})
			.then((res) => {
				if (res.data.code == 0) {
					proxy.$message({
						message: "操作成功",
						type: "success"
					})
					pubParams(getList)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
	//改变骑手在线状态
	function changeRider(row,e){
		proxy.$axios
			.post("admin/rider/setRiderStatus", {
				id: row.id,
				rider_status:e
			})
			.then((res) => {
				if (res.data.code == 0) {
					proxy.$message({
						message: "操作成功",
						type: "success"
					})
					pubParams(getList)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
	//改变骑手账号状态
	function changeAccount(row,e){
		proxy.$axios
			.post("admin/rider/setacstate", {
				id: row.id,
				account_state:e
			})
			.then((res) => {
				if (res.data.code == 0) {
					proxy.$message({
						message: "操作成功",
						type: "success"
					})
					pubParams(getList)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
	
	/*
	 *调余额
	 */
	const showEditBalance = ref(false)
	const form_loading = ref(false)
	const ruleClassRef = ref(null)
	const ruleClassForm = reactive({
		rider_id: 0,
		wallet_balance: "",
		remark: ""
	})
	const ruleCheckClass = reactive({
		wallet_balance: [{
			required: true,
			message: "请输入变动金额",
			trigger: "blur"
		}],
		remark: [{
			required: true,
			message: "请输入备注",
			trigger: "blur"
		}],
	})
	const handleEditIncome = (row) => {
		ruleClassForm.rider_id = row.id
		showEditBalance.value = true
	}
	
	const resetClassForm = (formEl) => {
		if (!formEl) return
		formEl.resetFields()
	}
	const closeAddClass = () => {
		showEditBalance.value = false
		resetClassForm(ruleClassRef.value)
	}
	const submitClassForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				form_loading.value = true
				// let names = proxy.$util.replaceStr(ruleClassForm.name)
				let data = {
					rider_id: ruleClassForm.rider_id,
					wallet_balance: ruleClassForm.wallet_balance,
					remark: ruleClassForm.remark
				}
	
				proxy.$axios
					.post("admin/wallet/price/edit", data)
					.then((res) => {
						form_loading.value = false
						if (res.data.code == 0) {
							showEditBalance.value = false
							proxy.$message({
								message: "修改成功",
								type: "success"
							})
							pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						form_loading.value = false
					})
			}
		})
	}
</script>

<style lang="less" scoped>
	.cardImg {
		width: 300px;
		height: 200px;
	}
</style>